feat(typed effect): add tumble typed effect (@d1rshan)#7793
feat(typed effect): add tumble typed effect (@d1rshan)#7793d1rshan wants to merge 6 commits intomonkeytypegame:masterfrom
Conversation
monkeytypegeorge
added
frontend
github-actions
bot
added
the
waiting for review
There was a problem hiding this comment.
Pull request overview
Adds a new tumble typed effect for the test page, with a JS-driven animation that spawns a falling clone of correctly typed words while hiding the original word.
Changes:
- Extend typed effect config schema + settings UI to include
tumble. - Add a new
frontend/src/ts/test/typed-effects.tsmodule to host JS-driven typed effects (currentlytumble). - Wire typed effect lifecycle into
test-ui(trigger on word typed, clear on show/finish) and add corresponding SCSS + keyframes.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/schemas/src/configs.ts | Adds tumble to TypedEffectSchema enum. |
| frontend/src/ts/test/typed-effects.ts | Implements JS behavior for tumble (clone + fall animation + cleanup). |
| frontend/src/ts/test/test-ui.ts | Hooks typed-effects into word-typing flow and clears clones/styles on lifecycle events. |
| frontend/src/styles/test.scss | Adds typed-effect-tumble hiding rule + .tumble-clone animation styling. |
| frontend/src/styles/animations.scss | Adds @keyframes typedEffectTumble. |
| frontend/src/html/pages/settings.html | Adds tumble button to typedEffect settings. |
| if (key === "typedEffect") { | ||
| TypedEffects.clear(); | ||
| } |
There was a problem hiding this comment.
What do you think about clearing only if the newValue !== "tumble" ?
| @media (prefers-reduced-motion) { | ||
| .word.typed:not(.error) { | ||
| opacity: 1; |
There was a problem hiding this comment.
why disable hiding words in prefers-reduced-motion? I think disabling animations is enough
There was a problem hiding this comment.
now for prefers-reduced-motion, words are hidden but falling words animation is disabled. addressed in b01e7cd
| clone.style.setProperty("--fall-x", `${randomX}px`); | ||
|
|
||
| document.body.appendChild(clone); | ||
| word.setStyle({ opacity: "0" }); |
There was a problem hiding this comment.
why is setting inline opacity needed? Doesn't the change in css already do the job?
There was a problem hiding this comment.
you're right, thanks for pointing that out. removed setting opacity inline b01e7cd
tumble.mp4
This PR adds a new typed effect called tumble.
When a correctly submitted word becomes typed, it creates a temporary animated clone that falls off the screen while the original word is hidden. Incorrect submitted words stay in place so error feedback remains visible.
This PR also introduces a dedicated
typed-effectsmodule for typed effects that need JavaScript behavior, so effect-specific logic does not have to live directly intest-ui.